<style>
body {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: white;
}

div:first-child {
  margin-top: 0px;
}

div {
  cursor: pointer;
  text-align: center;
  padding: 1px 3px;
  font-family: sans-serif;
  font-size: 0.8em;
  width: 100px;
  margin-top: 1px;
  background: #cccccc;
}
div:hover {
  background: #aaaaaa;
}
</style>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (data) {
    if (xhr.readyState == 4) {
        showStations(data);
    }
};
var url = "http://thejettube.appspot.com/getstationnames";
xhr.open('GET', url, true);
xhr.send();

function stationSelected(stat) {
chrome.extension.sendRequest({station:stat.innerText});
window.close();
}


function showStations(data) {
    var stations = eval('(' + xhr.responseText + ')');
    for (var i = 0, station; station = stations[i]; i++) {
        var link = document.createElement('div');
        link.setAttribute('onClick', "stationSelected(this)");
        var theText = document.createTextNode(station);
        link.appendChild(theText);
        document.body.appendChild(link);
    }
}
</script>
<body>
<h2>Add video to station below:</h2>
</body>